<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form :model="queryParams" class="mb-[-16px]" inline>
                <el-form-item label="IMEI" prop="imei">
                    <el-input v-model="queryParams.imei" class="w-[280px]" clearable placeholder="请输入IMEI" />
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="queryParams.name" class="w-[280px]" clearable placeholder="请输入设备名称" />
                </el-form-item>
                <!--                <el-form-item label="自动开炮" prop="automatic_firing">-->
                <!--                    <el-input v-model="queryParams.automatic_firing" class="w-[280px]" clearable-->
                <!--                              placeholder="请输入自动开炮" />-->
                <!--                </el-form-item>-->
                <el-form-item label="设备编号" prop="code">
                    <el-input v-model="queryParams.code" class="w-[280px]" clearable placeholder="请输入设备编号" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-loading="pager.loading" class="!border-none" shadow="never">
            <div class="mt-4">
                <el-table :data="pager.lists">
                    <!-- <el-table-column label="物联网卡号" prop="iccid" show-overflow-tooltip />-->
                    <el-table-column label="IMEI" prop="imei" show-overflow-tooltip width="150" />
                    <el-table-column label="设备名称" prop="name" show-overflow-tooltip width="150" />
                    <el-table-column label="地址" prop="address" show-overflow-tooltip width="230" />
                    <el-table-column label="电量" prop="electricity" show-overflow-tooltip />
                    <el-table-column label="油量" prop="oil_state" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-tag>{{ row.oil_state == 1 ? '正常' : '缺油' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="信号" prop="signal" show-overflow-tooltip />
                    <el-table-column label="默认音量" prop="default_volume" show-overflow-tooltip />
                    <el-table-column label="低音量开启时间" prop="low_pitch_start" show-overflow-tooltip />
                    <el-table-column label="低音量结束时间" prop="low_pitch_end" show-overflow-tooltip />
                    <el-table-column label="低音量" prop="bass_volume" show-overflow-tooltip />
                    <el-table-column label="自动开炮" prop="automatic_firing" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-tag>{{ row.automatic_firing == 1 ? '是' : '否' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否禁用" prop="is_forbidden" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-button size="small" type="primary" @click="handlePermission(row)">
                                {{ row.is_forbidden ? '启用' : '禁用' }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格配置" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-button size="small" type="primary" @click="open_drawer(row.id)">
                                价格配置
                            </el-button>
                        </template>

                    </el-table-column>
                    <el-table-column label="设备编号" prop="code" show-overflow-tooltip />
                    <el-table-column label="备注" prop="remark" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="{ row }">
                            <el-button v-perms="['boom_device/edit']" link type="primary" @click="handleEdit(row)">
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @close="showEdit = false" @success="getLists" />
    </div>
    <el-drawer v-model="drawer" title="价格配置" :direction="direction" size="50%" :before-close="handleClose">
        <el-card>
            <el-table :data="priceList" stripe style="width: 100%">
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="subhead" label="副标题" />
                <el-table-column prop="price" label="价格" />
                <el-table-column prop="use_time" label="使用时间" />
                <el-table-column prop="on_shelf" label="是否上架">
                    <template #default="{ row }">
                        <el-button size="small" type="primary" @click="handleOnShelf(row)">
                            {{ row.on_shelf ? '上架' : '下架' }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" />
            </el-table>
        </el-card>
    </el-drawer>
</template>

<script lang="ts" name="boomDeviceLists" setup>
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiBoomDeviceDisable, apiBoomDeviceLists, getDevicePrice, apiBoomShelfPrice } from '@/api/boom_device'
import EditPopup from './edit.vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
const drawer = ref(false)

const direction = ref<DrawerProps['direction']>('rtl')


// 查询条件
const queryParams = reactive({
    imei: '',
    name: '',
    code: ''
})


const priceList = reactive<Array<{
    id: string
    title: string
    subhead: string
    price: string
    use_time: string
    on_shelf: string
    device_id: string
    create_time: string
}>>([])

const handleClose = (done: () => void) => {
    done()
}


// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiBoomDeviceLists,
    params: queryParams
})


const open_drawer = async (device_id: any) => {
    priceList.splice(0, priceList.length)
    drawer.value = true
    getPriceLists(device_id)

    console.log('价格列表:', priceList)
}

const getPriceLists = async (device_id: any) => {
    let res = await getDevicePrice({ id: device_id })
    if (res?.length) {
        priceList.push(
            ...res.map((item: any) => ({
                id: item.id || '',
                title: item.title || '',
                subhead: item.subhead || '',
                price: item.price || '',
                use_time: item.use_time || '',
                on_shelf: item.on_shelf || '',
                device_id: item.device_id || '',
                create_time: item.create_time || ''
            }))
        )
    }
}


// 编辑
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}

const handlePermission = async (data: any) => {
    await apiBoomDeviceDisable({ id: data.id, is_forbidden: data.is_forbidden ? 0 : 1 })
    getLists()
}

const handleOnShelf = async (data: any) => {
    await apiBoomShelfPrice({ id: data.id, on_shelf: data.on_shelf ? 0 : 1 })
    priceList.splice(0, priceList.length)
    getPriceLists(data.device_id)
}


getLists()
</script>
